<template>
  <svg aria-hidden="true">
    <use
      :xlink:href="symbolId"
      :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { propTypes } from '@/utils/propTypes'
const props = defineProps({
  prefix: propTypes.string.def('icon'),
  name: propTypes.string.def(''),
  color: propTypes.string.def('#333'),
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
